import React, { Component } from 'react'
import { Form, Col, FormControl, FormGroup, ControlLabel, Button } from 'react-bootstrap'

class RegisterForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      mail: '',
      passwd: '',
      passwd2: ''
    }
  }

  handleNameChange(e) {
    this.setState({name: e.target.value});
  }
  handleMailChange(e) {
    this.setState({mail: e.target.value});
  }
  handlePasswdChange(e){
    this.setState({passwd: e.target.value})
  }
  handlePasswd2Change(e){
    this.setState({passwd2:e.target.value})
  }

  handleSubmit(event) {
    event.preventDefault();
    if (! (this.state.name && this.state.name &&this.state.passwd) ){
      alert('请输入完整信息')
    }else if (this.state.passwd !== this.state.passwd2) {
      alert('两次输入密码不一致，请检查')
    }else {
      this.props.register(this.state.name, this.state.mail, this.state.passwd)
    }
  }

  render () {
    return(
    <Col xs={12}>
      <br/><br/><br/>
      <Col xs={6} xsOffset={3}>
        <Form onSubmit={(e) => { this.handleSubmit(e) }} horizontal>
        <FormGroup controlId="formHorizontalEmail">
            <Col componentClass={ControlLabel} sm={3}>
              用户名
            </Col>
            <Col sm={9}>
              <FormControl type="text" placeholder="" value={this.state.name} onChange={(e) => this.handleNameChange(e)} />
            </Col>
          </FormGroup>

          <FormGroup controlId="formHorizontalEmail">
            <Col componentClass={ControlLabel} sm={3}>
              邮箱
            </Col>
            <Col sm={9}>
              <FormControl type="email" placeholder="" value={this.state.mail} onChange={(e) => this.handleMailChange(e)} />
            </Col>
          </FormGroup>

          <FormGroup controlId="formHorizontalPassword">
            <Col componentClass={ControlLabel} sm={3}>
              密码
            </Col>
            <Col sm={9}>
              <FormControl type="password" placeholder="" value={this.state.passwd} onChange={(e) => this.handlePasswdChange(e)} />
            </Col>
          </FormGroup>

          <FormGroup controlId="formHorizontalPassword">
            <Col componentClass={ControlLabel} sm={3}>
              重复密码
            </Col>
            <Col sm={9}>
              <FormControl type="password" placeholder="" value={this.state.passwd2} onChange={(e) => this.handlePasswd2Change(e)} />
            </Col>
          </FormGroup>

          <FormGroup>
            <Col smOffset={5} sm={9}>
              <Button type="submit" >
                登录
              </Button>
            </Col>
          </FormGroup>
        </Form>
      </Col>
    </Col>
    )
  }
}

export default RegisterForm